<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康体检</title>
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="physical_exam.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <button class="back-btn" onclick="window.location.href='/demo/index/index.html'">
                <i class="fas fa-arrow-left"></i>
            </button>
            </div>
            <h1>健康体检</h1>
        </div>

        <!-- 体检预约卡片 -->
        <div class="exam-container">
            <div class="exam-card">
                <h2>体检预约</h2>
                <div class="form-group">
                    <label>预约日期</label>
                    <input type="date" id="examDate" min="">
                </div>
                <div class="form-group">
                    <label>预约时段</label>
                    <select id="examTime">
                        <option value="">请选择时段</option>
                        <option value="morning">上午 (8:00-11:00)</option>
                        <option value="afternoon">下午 (14:00-16:00)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>体检套餐</label>
                    <select id="examPackage">
                        <option value="">请选择套餐</option>
                    </select>
                </div>
                <button class="submit-btn" onclick="submitAppointment()">立即预约</button>
            </div>

            <!-- 体检套餐详情 -->
            <div class="package-details">
                <h3>套餐详情</h3>
                <div class="package-tabs">
                    <div class="tab active" data-package="basic">基础套餐</div>
                    <div class="tab" data-package="advanced">高级套餐</div>
                    <div class="tab" data-package="premium">精密套餐</div>
                </div>
                <div class="package-content" id="packageContent">
                    <!-- 内容将通过 JavaScript 动态填充 -->
                </div>
            </div>

            <!-- 注意事项 -->
            <div class="notice-section">
                <h3>体检注意事项</h3>
                <ul>
                    <li>体检前一天晚上不要饮酒，避免剧烈运动</li>
                    <li>体检当天空腹，可以适量饮水</li>
                    <li>如有服用药物，请告知医生</li>
                    <li>女性经期不宜做妇科检查</li>
                    <li>带好身份证和医保卡</li>
                </ul>
            </div>
        </div>

        <!-- 预约确认弹窗 -->
        <div class="modal" id="confirmModal">
            <div class="modal-content">
                <h3>预约确认</h3>
                <div class="confirm-details">
                    <p id="confirmDate"></p>
                    <p id="confirmTime"></p>
                    <p id="confirmPackage"></p>
                </div>
                <div class="modal-buttons">
                    <button class="btn-cancel" onclick="hideConfirmModal()">取消</button>
                    <button class="btn-confirm" onclick="confirmAppointment()">确认预约</button>
                </div>
            </div>
        </div>
    </div>
    <script src="physical_exam.js"></script>
</body>
</html>